<div class="box">
    <div class="box-header">
        <h3 class="box-title">站内搜索</h3>
    </div>
    <div class="box-body">
        <div id="search-words" style="height:300px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            let AppSearchWord = echarts.init(document.getElementById('search-words'));
            AppSearchWord.showLoading();
            fetch('/api/admin/home/search-words', {method: "POST"}).then(res => res.json())
                .then(data => {
                    AppSearchWord.hideLoading();
                    if (data.length > 0) {
                        // 指定图表的配置项和数据
                        let option = {
                            legend: {
                                type: 'scroll',
                                orient: 'horizontal',
                                top: 'bottom'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    mark: {show: true},
                                    dataView: {show: true, readOnly: false},
                                    restore: {show: true},
                                    saveAsImage: {show: true}
                                }
                            },
                            series: [
                                {
                                    name: '热门搜索关键词',
                                    type: 'pie',
                                    radius: ['30%', '50%'],
                                    center: ['50%', '35%'],
                                    itemStyle: {
                                        borderRadius: 10,
                                        borderColor: '#fff',
                                        borderWidth: 2
                                    },
                                    data: data
                                }
                            ]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        AppSearchWord.setOption(option);
                    } else {
                        let setNotOpt = (demo, subtext = '暂无数据') => {
                            let option = {
                                title: {
                                    text: ' {a|}',
                                    x: 'center',
                                    y: 'center',
                                    subtext,
                                    itemGap: -20,
                                    textStyle: {
                                        rich: {
                                            a: {
                                                color: '#000',
                                                fontSize: '16',
                                                height: 80,
                                                width: 160,
                                                backgroundColor: {
                                                    image: '',
                                                }
                                            },
                                        }
                                    },
                                    subtextStyle: {
                                        fontSize: 16,
                                    }
                                }
                            }
                            demo.setOption(option, true)
                        }

                        setNotOpt(AppSearchWord,'暂无数据！')
                    }
                });
        </script>
    </div>
</div>
